// 主Modal容器样式
.orderPaymentModal {
  .stepsContainer {
    margin-bottom: 24px;

    .steps {
      max-width: 600px;
      margin: 0 auto;

      :global(.ant-steps-item-title) {
        font-weight: 500;
      }
    }
  }

  .content {
    min-height: 400px;
    padding: 0 8px;
  }
}

// 订单信息组件样式
.orderInfo {
  .orderDescriptions {
    margin-bottom: 16px;

    :global(.ant-descriptions-item-label) {
      color: @text-color-secondary;
      width: 80px;
      padding-right: 20px;
    }

    :global(.ant-descriptions-item-content) {
      color: @text-color;
    }
  }

  .goodsList {
    .goodsItem {
      display: flex;
      margin-bottom: 12px;
      padding-bottom: 12px;
      border-bottom: 1px dashed @border-color-split;

      &:last-child {
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: none;
      }
    }

    .goodsImage {
      width: 60px;
      height: 60px;
      object-fit: cover;
      border-radius: 4px;
      margin-right: 12px;
      border: 1px solid @border-color-base;
    }

    .goodsInfo {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .goodsName {
        margin-bottom: 8px;
        color: @text-color;
        font-weight: 500;
      }

      .goodsMeta {
        display: flex;
        color: @text-color-secondary;
        font-size: 13px;
      }
    }
  }

  .orderSummary {
    margin-bottom: 24px;

    .summaryRow {
      display: flex;
      justify-content: space-between;
      margin-bottom: 8px;
      color: @text-color-secondary;
    }

    .summaryRowTotal {
      display: flex;
      justify-content: space-between;
      font-size: 16px;
      font-weight: 500;
      margin-top: 12px;
    }

    .totalAmount {
      color: @error-color;
      font-size: 18px;
    }
  }

  .actionBar {
    margin-top: 24px;

    button {
      height: 42px;
      font-size: 16px;

      :global(.anticon) {
        font-size: 18px;
      }
    }
  }
}

// 支付方式选择组件样式
.paymentMethods {
  .backButton {
    margin-bottom: 16px;
    padding-left: 0;
    color: @primary-color;

    &:hover {
      color: @primary-5;
    }

    :global(.anticon) {
      margin-right: 6px;
    }
  }

  .paymentHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 12px;
    border-bottom: 1px solid @border-color-split;
  }

  .paymentTitle {
    margin-bottom: 0;
    color: @heading-color;
  }

  .paymentAmount {
    font-size: 16px;

    .amount {
      color: @error-color;
      font-size: 20px;
      font-weight: 600;
    }
  }

  .paymentOptionsContainer {
    margin: 24px 0;
  }

  .paymentOptions {
    display: flex;
    flex-direction: column;
    gap: 12px;

    :global(.ant-radio-button-wrapper) {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      height: 60px;
      padding: 0 20px;
      border-radius: 4px !important;
      text-align: left;
      border: 1px solid @border-color-base !important;

      &:not(:first-child)::before {
        display: none;
      }

      &:hover {
        color: @primary-color;
      }

      &:global(.ant-radio-button-wrapper-checked) {
        background: @component-background;
        border-color: @primary-color !important;
        box-shadow: 0 0 0 1px @primary-color;
      }
    }
  }

  .paymentDescriptions {
    margin-top: 16px;
    padding: 16px;
    background-color: @background-color-light;
    border-radius: @border-radius-base;
    border-left: 3px solid @primary-color;
  }

  .paymentDescription {
    padding: 4px 0;
    color: @text-color-secondary;
  }

  .paymentTips {
    text-align: center;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px dashed @border-color-split;
    color: @text-color-secondary;
    font-size: 13px;
  }
}

// 扫码支付组件样式
.qrCodePayment {
  .backButton {
    margin-bottom: 16px;
    padding-left: 0;
    color: @primary-color;

    &:hover {
      color: @primary-5;
    }

    :global(.anticon) {
      margin-right: 6px;
    }
  }


  .qrCodeContainer {
    display: flex;
    justify-content: center;
    margin: 32px 0;
  }

  .qrCodeBox {
    text-align: center;
    padding: 24px;
    border: 1px dashed @border-color-base;
    border-radius: @border-radius-base;
    background-color: @component-background;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    width: 100%;
    max-width: 300px;
  }

  .qrCodeImage {
    width: 100%;
    max-width: 200px;
    height: auto;
    margin: 0 auto 16px;
    display: block;
    border: 1px solid @border-color-split;
  }

  .qrCodeTip {
    display: block;
    margin-top: 16px;
    color: @text-color;
    font-weight: 500;
  }

  .paymentAction {
    margin: 32px 0 16px;

    button {
      height: 42px;
      font-size: 16px;
      font-weight: 500;
    }
  }

  .paymentTips {
    text-align: center;
    color: @text-color-secondary;
    font-size: 13px;
  }
}

// 现金支付组件样式
.cashPayment {
  :global(.ant-modal-body) {
    padding: 24px;
  }

  :global(.ant-modal-footer) {
    padding: 16px 24px;
    border-top: 1px solid @border-color-split;
  }

  .cashContent {
    text-align: center;
    padding: 16px 0;
  }

  .cashTitle {
    margin-bottom: 24px;
    color: @heading-color;
  }

  .cashAmount {
    font-size: 20px;
    display: block;
    margin-bottom: 32px;
    color: @text-color;

    .amount {
      color: @error-color;
      font-size: 24px;
      font-weight: 600;
      margin-left: 8px;
    }
  }

  .cashTips {
    margin-top: 24px;
    color: @text-color-secondary;
    font-size: 14px;
  }
}

// 支付结果组件样式
.paymentResult {
  :global(.ant-result) {
    padding: 24px 0;
  }

  :global(.ant-result-icon) {
    margin-bottom: 12px;

    > .anticon {
      font-size: 72px;
    }
  }

  :global(.ant-result-title) {
    color: @heading-color;
    font-weight: 600;
  }

  :global(.ant-result-subtitle) {
    color: @text-color-secondary;
    margin-top: 8px;
  }

  .resultDetails {
    margin-top: 8px;
    padding: 8px;
    background-color: @background-color-light;
    border-radius: @border-radius-base;
    text-align: left;
  }

  .resultActions {
    margin-top: 8px;
    display: flex;
    justify-content: center;
    gap: 16px;

    button {
      min-width: 120px;
      height: 40px;
    }
  }
}


// 地址选择卡片
.addressCard {
  margin-bottom: 16px;

  :global(.ant-card-head) {
    border-bottom: none;
    padding-bottom: 0;
  }

  :global(.ant-card-body) {
    padding-top: 8px;
  }
}

.addressGroup {
  width: 100%;
}

.addressItem {
  width: 100%;
  height: auto;
  padding: 12px 16px;
  margin-right: 0;
  margin-bottom: 8px;
  display: flex;
  align-items: center;

  :global(.ant-radio-button-wrapper-checked) {
    border-color: @primary-color;
    background: fade(@primary-color, 5%);
  }
}

.addressContent {
  flex: 1;
  margin-left: 8px;
}

.addressHeader {
  display: flex;
  align-items: center;
  margin-bottom: 4px;
}

.addressText {
  display: block;
}

// 地址表单样式
.addressForm {
  :global(.ant-form-item) {
    margin-bottom: 16px;
  }
}

.tagExamples {
  margin-top: 8px;
  color: @text-color-secondary;

  .tagExample {
    cursor: pointer;
    border-style: dashed;

    &:hover {
      color: @primary-color;
      border-color: @primary-color;
    }
  }
}


.qrCodePayment {
  .headerContainer {
    position: relative;
    margin-bottom: 24px;
  }

  .backButton {
    position: absolute;
    left: 0;
    top: 0;
  }

  .paymentHeader {
    text-align: center;
    padding-top: 8px;
  }

  .paymentAmount {
    font-size: 18px;

    .amount {
      color: @error-color;
      font-size: 22px;
    }
  }

  .scanContainer {
    margin: 32px 0;
    text-align: center;

    .spinContainer {
      padding: 40px 0;
    }

    .scanInputWrapper {
      max-width: 320px;
      margin: 0 auto;
    }

    .scanInput {
      height: 48px;
      font-size: 16px;
      text-align: center;

      &:hover, &:focus {
        border-color: @primary-color;
      }
    }

    .codePreview {
      display: inline-block;
      font-family: monospace;
      letter-spacing: 1px;
    }

    .scanTip {
      display: block;
      margin-top: 16px;
      font-size: 14px;
      color: @text-color-secondary;
    }
  }

  .paymentTips {
    text-align: center;
    margin-top: 24px;
    color: @text-color-secondary;
    font-size: 13px;
  }
}
